<template>
  <div>
    <page-header
      title="编辑用例"
      :save="saveAdd"
      :showCancel="false"
    ></page-header>
    <el-form
      ref="apiCaseForm"
      :rules="rules"
      :model="apiCaseForm"
      label-width="80px"
    >
      <p class="tip">基础信息</p>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="接口名称" prop="apiName">
            <el-input
              size="small"
              v-model="apiCaseForm.apiName"
              placeholder="请输入接口名称"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="接口请求" prop="path">
            <el-input
              size="small"
              v-model="apiCaseForm.path"
              placeholder="请输入接口地址"
              style="margin-top: 5px"
              maxlength="200"
              show-word-limit
              disabled
            >
              <el-select
                v-model="apiCaseForm.method"
                slot="prepend"
                style="width: 80px"
                size="small"
                disabled
              >
                <el-option
                  v-for="item in methods"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="18">
          <el-form-item label="用例名称" prop="caseapiName">
            <el-input
              size="small"
              v-model="apiCaseForm.caseapiName"
              placeholder="请输入用例名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="用例描述" prop="caseapiDesc">
            <el-input
              size="small"
              :autosize="{ minRows: 4 }"
              type="textarea"
              clearable
              placeholder="请输入用例描述"
              v-model="apiCaseForm.caseapiDesc"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <p class="tip">请求参数</p>
      <el-tabs style="width: 100%" v-model="activeTab">
        <el-tab-pane label="请求头" name="caseapiHeader">
          <div class="request-param">
            <request-header
              :reqHeader="apiCaseForm.caseapiHeader"
              style="width: 100%"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="请求体" name="caseapiBody">
          <div class="request-param">
            <request-body
              :reqBody="apiCaseForm.caseapiBody"
              style="width: 100%"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="PATH参数" name="caseapiQuery">
          <div class="request-param">
            <request-query
              :reqQuery="apiCaseForm.caseapiQuery"
              style="width: 100%"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="前置后置脚本" name="caseapiController">
          <controller
            :controller="apiCaseForm.caseapiController"
            style="width: 100%"
          />
        </el-tab-pane>
        <el-tab-pane label="后置结果处理" name="caseapiRelation">
          <relation
            :relation="apiCaseForm.caseapiRelation"
            :apiId="apiCaseForm.apiId"
            style="width: 100%"
          />
        </el-tab-pane>
        <el-tab-pane label="响应断言" name="caseapiAssertion">
          <assertion
            :assertion="apiCaseForm.caseapiAssertion"
            :apiId="apiCaseForm.apiId"
            style="width: 100%"
          />
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import PageHeader from "../../common/components/pageheader";
import SelectTree from "../../common/business/selectTree";
import RequestHeader from "../common/api/requestHeader";
import RequestQuery from "../common/api/requestQuery";
import RequestRest from "../common/api/requestRest";
import RequestBody from "../common/api/requestBody";
import Assertion from "../common/case/assertion";
import Relation from "../common/case/relation";
import Controller from "../common/case/controller";

export default {
  components: {
    PageHeader,
    SelectTree,
    RequestHeader,
    RequestQuery,
    RequestRest,
    RequestBody,
    Assertion,
    Relation,
    Controller,
  },
  data() {
    return {
      activeTab: "caseapiBody",
      apiCaseForm: {
        apiId: "",
        caseapiName: "",
        caseapiDesc: "",
        apiName: "",
        path: "",
        method: "GET",
        caseapiHeader: [],
        caseapiBody: { type: "json", form: [], json: "", raw: "", file: [] },
        caseapiQuery: [],
        caseapiController: [],
        caseapiRelation: [],
        caseapiAssertion: [],
      },
      methods: ["POST", "GET", "PUT", "DELETE", "HEAD", "PATCH", "OPTIONS"],
      rules: {
        caseapiName: [
          { required: true, message: "用例名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    apiId: {
      type: String,
    },
    apiCaseId: {
      type: String,
    },
  },
  watch: {
    apiCaseId: {
      handler(newVal) {
        if (newVal) this.getPageData();
      },
      immediate: true, // 使得在初始化时也会立即触发回调
    },
    apiId: {
      handler(newVal) {
        if (newVal) this.getPageData();
      },
      immediate: true, // 使得在初始化时也会立即触发回调
    },
  },
  methods: {
    getPageData() {
      if (this.apiCaseId) this.getCaseDetail(this.apiCaseId);
      else if (this.apiId) this.getApiDetail(this.apiId);
    },
    getCaseDetail(apiCaseId) {
      if (!apiCaseId) {
        // 新增接口
        this.apiCaseForm.body = {
          type: "json",
          form: [],
          json: "",
          raw: "",
          file: [],
        };
      } else {
        // 编辑接口
        let url = "/nore/autotest/caseapi/detail/" + apiCaseId;
        this.$get(url, (response) => {
          let data = response.data;
          data.caseapiHeader = data.caseapiHeader
            ? JSON.parse(data.caseapiHeader)
            : [];
          data.caseapiBody = data.caseapiBody
            ? JSON.parse(data.caseapiBody)
            : { type: "json", form: [], json: "", raw: "", file: [] };
          data.caseapiQuery = data.caseapiQuery
            ? JSON.parse(data.caseapiQuery)
            : [];
          data.caseapiController = data.caseapiController
            ? JSON.parse(data.caseapiController)
            : [];
          data.caseapiRelation = data.caseapiRelation
            ? JSON.parse(data.caseapiRelation)
            : [];
          data.caseapiAssertion = data.caseapiAssertion
            ? JSON.parse(data.caseapiAssertion)
            : [];
          this.apiCaseForm = data;
        });
      }
    },
    getApiDetail(apiId) {
      // 编辑接口
      let url = "/nore/autotest/api/detail/" + apiId;
      this.$get(url, (response) => {
        let data = response.data;
        this.apiCaseForm.apiName = data.name;
        this.apiCaseForm.apiId = data.id;
        this.apiCaseForm.path = data.path;
        this.apiCaseForm.method = data.method;
        this.apiCaseForm.caseapiHeader = JSON.parse(data.header);
        this.apiCaseForm.caseapiBody = JSON.parse(data.body);
        this.apiCaseForm.caseapiQuery = JSON.parse(data.query);
        this.apiCaseForm.caseId = "";
        this.apiCaseForm.caseapiName = "";
        this.apiCaseForm.caseapiDesc = "";
        this.apiCaseForm.caseapiController=[];
        this.apiCaseForm.caseapiRelation=[];
        this.apiCaseForm.caseapiAssertion=[];
      });
    },
    selectModule(data) {
      this.apiCaseForm.moduleId = data.id;
      this.apiCaseForm.moduleName = data.label;
    },
    cancelAdd() {
      this.$router.push({ path: "/caseCenter/interfaceManage" });
    },
    saveAdd() {
      this.$refs["apiCaseForm"].validate((valid) => {
        if (valid) {
          this.apiCaseForm.projectId = this.$store.state.projectId;
          let url = "/nore/autotest/caseapi/save";
          this.$post(url, this.apiCaseForm, (response) => {
            this.$message.success("保存成功");
            this.$router.push({ path: "/caseCenter/interfaceManage" });
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.request-param {
  min-height: 480px;
}
</style>
